<template>
  <div class="cards">
    <div class="card hoverBtn">
      <div class="card-title"><span>基础信息</span>
        <div class="btnEdit">
          <el-button type="primary" @click="handleEdit()">编辑</el-button>
        </div>
      </div>
      <div class="card-primary">
        <div class="admin-avatar">
          <img :src="avatar" alt="">
        </div>
        <div class="admin-name">{{ initData.adminName.value }}</div>
        <div class="admin-detail">
          {{ initData.adminDetail.value }}
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-title"><span>账号编辑</span></div>
      <div class="card-primary">
        <el-form ref="adminFormRef" label-width="100px" :model="upAdminPwdV" :rules="upAdminPwdRules">
          <el-form-item label="用户名">
            <el-input class="card-input" v-model="upAdminPwdV.adminName" disabled />
          </el-form-item>
          <el-form-item label="旧密码" prop="oldPwd">
            <el-input v-model="upAdminPwdV.oldPwd" type="password" />
          </el-form-item>
          <el-form-item label="新密码" prop="newPwd">
            <el-input v-model="upAdminPwdV.newPwd" type="password" />
          </el-form-item>
          <el-form-item label="个人简介">
            <el-input v-model="upAdminPwdV.adminDetail" />
          </el-form-item>
          <el-form-item style="float: right;">
            <el-button @click="handleReset(adminFormRef)">重置</el-button>
            <el-button type="primary" @click="handleConfirm(adminFormRef)">提交</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>

  <!-- <div class="distribution-map">
    <chinaMap />
  </div> -->
  <upAdminInfoVue v-if="dialogFormVisible" :dialogFormVisible="dialogFormVisible"
    :handleCloseDialog="handleCloseDialog" />
</template>

<script lang='ts' setup>
import { loginOu } from "@/api/authApi"
import { getAdminInfo, upAdminPwd } from "@/api/adminApi"
import { upAdminPwdV, upAdminPwdRules } from "@/utills/adminValidators"
import { elmessage, data } from "@/hook/hook"
import type { FormInstance } from 'element-plus'
import upAdminInfoVue from "@/components/admin/adminInfo/upAdminInfoVue.vue"

import { reactive, toRefs, onBeforeMount, watch, ref, computed } from "vue"
import { useStore } from "vuex"
import { useRouter } from "vue-router"
import chinaMap from "@/components/admin/chart/ChinaMap.vue"
const avatar = ref()
const store = useStore()
const router = useRouter()
const isShow = ref(false)
const admin = store.state.adminState.admin

const adminFormRef = ref<FormInstance>()
// 编辑框
const dialogFormVisible = ref(false)
const handleEdit = () => {
  dialogFormVisible.value = true
}
const handleCloseDialog = () => {
  dialogFormVisible.value = false
}


const handleConfirm = (form: FormInstance | undefined) => {
  if (!form) return
  form.validate((valid: any) => {
    if (valid) {
      const newData = {
        ...data(),
        ...upAdminPwdV,
      }
      upAdminPwd(newData).then((res: any) => {
        if (res.data["code"] == "200") {
          elmessage(res.data["message"], res.data["type"])
          setTimeout(() => {
            router.replace("/admin")
          }, 500);
          loginOu(data())
          localStorage.clear()
        }
        else if (res.data["code"] == "300") {
          elmessage(res.data["message"], res.data["type"])
          setTimeout(() => {
            router.replace("/admin")
          }, 500);
          localStorage.clear()
        }
        else if (res.data["code"] == "501") {
          elmessage(res.data["message"], res.data["type"])
        }
        else {
          console.log(res.data);
        }
      })
      form.resetFields()
    }
  })
}
const handleReset = (form: FormInstance | undefined) => {
  if (!form) return
  form.resetFields()
}



const initData = {
  adminId: computed(() => admin.adminId),
  adminName: computed(() => admin.adminName),
  adminEmail: computed(() => admin.adminEmail),
  adminPhone: computed(() => admin.adminPhone),
  adminDetail: computed(() => admin.adminDetail),
}
const init = () => {
  getAdminInfo(data()).then((res: any) => {
    if (res.data["code"] == "200") {
      admin.adminId = res.data["adminId"]
      admin.adminName = res.data["adminName"]
      admin.adminEmail = res.data["adminEmail"]
      admin.adminPhone = res.data["adminPhone"]
      admin.adminDetail = res.data["adminDetail"]
      upAdminPwdV.adminName = res.data["adminName"]
      upAdminPwdV.adminDetail = res.data["adminDetail"]
      isShow.value = true
    } else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    } else {
      console.log(res.data);

    }
  })
}
const watchVuexName = computed(() => store.state.adminState.admin.adminName)
watch(watchVuexName, (newval, oldval) => {
  upAdminPwdV.adminName = store.state.adminState.admin.adminName
}, { immediate: true })
const watchAdminAvatar = computed(() => store.state.adminState.admin.adminAvatar)
watch(watchAdminAvatar, (newval, oldval) => {
  avatar.value = store.state.adminState.admin.adminAvatar
}, { immediate: true })
onBeforeMount(() => {
  init()
  initData
})

</script>
<style scoped>
.card-input {
  min-width: 400px;
}

.hoverBtn:hover .btnEdit {
  display: block;
}

.btnEdit {
  float: right;
  line-height: 60px;
  margin-right: 60px;
  box-sizing: border-box;
  display: none;
  /* margin: 0 auto; */
}

.distribution-map {
  margin-top: 20px;
  /* float: left; */
  width: 1222px;
  height: 600px;
  /* background-color: red; */
}

.admin-detail {
  font-size: 16px;
}

.card-primary {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.admin-name {
  font-size: 24px;
  margin-top: 10px;
  margin-bottom: 12px;

}

.card-title {
  padding-left: 20px;
  line-height: 60px;
  border-bottom: 1px solid #e4e7ed;
  font-size: 17px;

}

/* 管理员头像 */
.admin-avatar {
  margin-top: 30px;
}

.admin-avatar img {
  width: 90px;
  height: 90px;
  border-radius: 100%;
}

.card {
  width: 600px;
  height: 330px;
  background-color: #FFF;
  border: 1px solid #e4e7ed;
  border-radius: 10px;
  /* float: left; */

  /* left: 50px; */
}

.card:hover {

  transition: border linear .2s;
  box-shadow: 0 0 10px rgba(213, 208, 213, 3);

}

.cards {
  min-width: 900px;
  display: flex;
  box-sizing: border-box;
  justify-content: space-around;
  align-content: center;
}</style>